<template>
  <div class="page">
    <CommonList
      ref="commonListRef"
      :requestUrl="requestUrl"
      :columns="columns"
      :queryFormItems="queryFormItems"
      :actions="['create', 'update', 'remove', 'detail']"
      @create="handCreate"
      @update="handUpdate"
      @remove="handRemove"
      @detail="handDetail"
    ></CommonList>

    <el-drawer v-model="open" title="添加|编辑文章" size="1000">
      <el-form ref="articleFormRef" :model="articleForm" :rules="articleRules" label-width="120px">
        <el-form-item label="文章名称" prop="title">
          <el-input v-model="articleForm.title" />
        </el-form-item>
        <el-form-item label="文章栏目" prop="cid">
          <!-- <el-input v-model="articleForm.cid" /> -->
          <el-select v-model="articleForm.cid">
            <el-option
              v-for="(item, index) in categories"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章作者" prop="author">
          <el-input v-model="articleForm.author" />
        </el-form-item>
        <el-form-item label="文章类型" prop="type">
          <!-- <el-input v-model="articleForm.type" /> -->
          <el-select v-model="articleForm.type">
            <el-option
              v-for="(val, key) in articleOptions"
              :key="key"
              :label="val"
              :value="Number(key)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <el-input v-model="articleForm.content" type="textarea" />
          <!-- <v-md-editor v-model="articleForm.content" height="400px"></v-md-editor> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handSubmit"> 保存 </el-button>
          <el-button @click="handCancel"> 取消 </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import CommonList from '@/components/CommonList.vue'
import { ElNotification, type FormInstance, type FormRules } from 'element-plus'
import { inject, reactive, ref } from 'vue'
import {
  categoryList,
  articleCreate,
  articleUpdate,
  articleDelete,
  articleSwitch
} from '@/api/content'

const _options: any = inject('_options')
const articleOptions = _options.getOption('article_type')

const categories = ref<ContentCategory[]>([])
categoryList({ pageIndex: 1, pageSize: 100 }).then((res) => {
  categories.value = res.data.rows
})

const requestUrl = 'contentArticles'
const columns = [
  { prop: 'title', label: '标题' },
  { prop: 'cname', label: '栏目' },
  { prop: 'author', label: '作者' },
  { prop: 'status', label: '状态', optionName: 'article_status' },
  { prop: 'type', label: '类型', optionName: 'article_type' },
  { prop: 'action', width: '100', detailTxt: '发布' }
]
const queryFormItems = [{ prop: 'name', label: '名称' }]

const articleForm = reactive<ContentArticle>({
  id: 0,
  cid: null,
  title: '',
  content: '',
  type: 2,
  author: ''
})
const articleRules = reactive<FormRules<ContentArticle>>({})
const open = ref(false)
const articleFormRef = ref<FormInstance>()
const commonListRef = ref()

function handCreate() {
  open.value = true
  resetForm()
}
function handUpdate(row: ContentArticle) {
  open.value = true
  resetForm()
  articleForm.id = row.id
  articleForm.title = row.title
  articleForm.content = row.content
  articleForm.type = row.type
  articleForm.cid = row.cid
  articleForm.author = row.author
}
function handSubmit() {
  if (!articleFormRef.value) return
  articleFormRef.value.validate(async (valid) => {
    if (!valid) return
    try {
      if (articleForm.id !== 0) {
        await articleUpdate(articleForm)
      } else {
        await articleCreate(articleForm)
      }
      open.value = false
      commonListRef.value?.handQuery()
      ElNotification({
        title: '提示',
        message: '保存成功',
        type: 'success'
      })
    } catch (error) {
      console.log(error)
    }
  })
}
function handCancel() {
  open.value = false
}
function resetForm() {
  if (!articleFormRef.value) return
  articleFormRef.value.resetFields()
}
async function handRemove(row: ContentArticle) {
  try {
    await articleDelete(row.id)
    commonListRef.value?.handQuery()
    ElNotification({
      title: '提示',
      message: '删除成功',
      type: 'success'
    })
  } catch (error) {
    //
  }
}
async function handDetail(row: ContentArticle) {
  try {
    await articleSwitch({ id: row.id, status: row.status !== 2 ? 2 : 1 })
    commonListRef.value?.handQuery()
    ElNotification({
      title: '提示',
      message: '发布成功',
      type: 'success'
    })
  } catch (error) {
    //
  }
}
</script>

<style lang="scss" scoped>
.page {
}
</style>
